<!--
 * @Author: your name
 * @Date: 2021-08-03 13:36:05
 * @LastEditTime: 2021-08-12 13:26:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \getHome (2)\src\components\discounts\amend.vue
-->
<!--福利列表-->

<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>福利详情</el-breadcrumb-item>
        <el-breadcrumb-item>福利列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <div class="hander">福利列表</div>
      <div class="entirety">
        <div class="search">
          <!--  账号状态搜索信息 -->

          <div class="demo-input-suffix">
            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click="isDialog('新增')"
              :disabled="listLength >= 2"
              >新增
            </el-button>

            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click="isCopy"
              >复制卡片</el-button
            >
          </div>
          <div class="news">
            <el-dialog
              :title="msg"
              :visible.sync="dialogFormVisible"
              width="50%"
            >
              <!--修改-->
              <el-form :model="form" ref="form">
                <el-form-item
                  label="标题"
                  required
                  prop="materialName"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.materialName"></el-input>
                </el-form-item>
                <el-form-item
                  label="背景颜色"
                  required
                  prop="bgColor"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.bgColor"></el-input>
                </el-form-item>
                <el-form-item
                  label="福利简介"
                  required
                  prop="materialSubName"
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.materialSubName"></el-input>
                </el-form-item>

                <el-form-item
                  label="生效时间"
                  required
                  :label-width="formLabelWidth"
                >
                  <el-col :span="11">
                    <el-form-item prop="startTime">
                      <el-date-picker
                        v-model="form.startTime"
                        type="datetime"
                        placeholder="选择时间"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="endTime" :label-width="formLabelWidth">
                      <el-date-picker
                        placeholder="选择时间"
                        v-model="form.endTime"
                        type="datetime"
                        style="margin-left:-130px"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item
                  label="显示位置"
                  required
                  prop="sort"
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.sort" placeholder="请选择">
                    <el-option
                      v-for="(item, key, index) in sortList"
                      :key="index"
                      :label="item"
                      :value="key"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="链接"
                  required
                  prop="targetUrl"
                  :label-width="formLabelWidth"
                >
                  <el-input
                    v-model="form.targetUrl"
                    style="width:70%;"
                  ></el-input>
                  <el-button
                    style="color: #fc9e76;"
                    type="text"
                    @click="urlback"
                    >url配置规则说明</el-button
                  >
                </el-form-item>
                <el-form-item
                  label="跳转方式"
                  required
                  prop="authType"
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.authType" placeholder="请选择">
                    <el-option label="应用内跳转" value="app"></el-option>
                    <el-option
                      label="跳转到第三方应用"
                      value="third_party"
                    ></el-option>
                    <el-option label="H5落地页" value="h5"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="跳转条件"
                  required
                  prop="targetType"
                  :label-width="formLabelWidth"
                >
                  <el-select v-model="form.targetType" placeholder="请选择">
                    <el-option label="无条件" value="needless"></el-option>
                    <el-option
                      label="授权星福生活登录"
                      value="platform_auth"
                    ></el-option>
                    <el-option
                      label="授权微盟登录"
                      value="weimob_auth"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="社区选择"
                  prop="refType"
                  :label-width="formLabelWidth"
                >
                  <el-checkbox-group
                    v-model="refCode"
                    @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                      v-for="city in regionCommunityList"
                      :label="city.subRgCode"
                      :key="city.subRgCode"
                      >{{ city.subRgName }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item style="text-align: right">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button
                    style="background-color:#fd804c;color: #fff;"
                    @click="submitForm"
                    >确定</el-button
                  >
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </div>
      </div>
      <!--  员工列表栏位-->

      <div class="entirety">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="materialIcon" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 70px; height: 30px"
                :src="scope.row.materialIcon"
                :preview-src-list="[scope.row.materialIcon]"
                :fit="'contain'"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column prop="materialName" label="标题">
            <template slot-scope="scope">
              <div>
                {{ scope.row.materialName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="显示位置">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sort }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="isDialog('修改', scope.row)"
                v-if="scope.row.materialStatus == 1"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                修改
              </el-button>
              <el-button
                @click="isOffShelf(scope.row)"
                style="color: #fc9e76;"
                type="text"
                v-if="scope.row.materialStatus == 0"
                size="small"
              >
                下架
              </el-button>
              <el-button
                @click.native.prevent="isDel(scope.row.materialId)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      formLabelWidth: "90px",
      msg: "",
      pageIndex: 1,
      pageSize: 20,
      sortList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      total: 0,
      form: {
        authType: "",
        endTime: "",
        bgColor: "",
        materialIcon: "",
        materialName: "",
        materialType: "",
        positionId: null,
        refType: null,
        sort: "",
        startTime: "",
        targetType: "",
        targetUrl: "",
        visitModel: ""
      },
      dialogFormVisible: false,
      tableData: [],
      id: "",
      refCode: [],
      regionCommunityList: [],
      form: {},
      positionType: "",
      positionId: "",
      name: "",
      listLength: "",
      description: ""
    };
  },
  activated() {
    const { positionType, positionId, name, description } = this.$route.query;

    this.description = description;
    this.name = name;
    this.positionType = positionType;
    this.positionId = positionId;
    this.DetailByPage();
    this.fetchRegionCommunityList();
  },

  methods: {
    //url链接
    urlback() {
      window.location.href = `https://golte-platform.oss-cn-shanghai.aliyuncs.com/excelFile/20211124%20TargetUrl%E9%85%8D%E7%BD%AE%E8%A7%84%E5%88%99.xlsx`;
    },
    handleCheckedCitiesChange(value) {
      this.form.refCode = value;
    },
    isCopy() {
      this.$http({
        url: "/cmsadmin/appIndex/backManager/copyPosition",
        method: "POST",
        data: {
          positionId: this.positionId,
          positionName: this.name,
          positionType: this.positionType,
          subName: this.description,
          target: ""
        }
      })
        .then(res => {
          if (res.success === 0) {
            this.$message.error(res.errorMsg);
          } else {
            this.$message.success("复制成功");
            this.$router.push({
              path: "/ManagementHome"
            });
          }
        })
        .catch(() => {
          this.$message.error("复制失败");
        });
    },

    isDialog(type, data) {
      this.msg = type;
      if (data !== undefined && type == "修改") {
        this.DetailByPage();
        this.id = data.id;
        this.refCode = data.refType;
        this.form = data;
      } else {
        this.form = {};
        this.refCode = [];
      }
      this.dialogFormVisible = true;
    },
    isOffShelf(data) {
      //console.log("data,,", data);

      this.$http({
        url: "/cmsadmin/appIndex/backManager/updateMaterialStatus",
        method: "POST",
        data: {
          materialId: data.materialId,
          materialStatus: 1,
          positionId: data.positionId
        }
      })
        .then(res => {
          if (res.success === 0) {
            this.$message.error(res.errorMsg);
          } else {
            this.$message.success("下架成功");
            this.DetailByPage();
          }
        })
        .catch(() => {
          this.$message.success("下架失败");
        });
    },
    submitForm() {
      if (this.msg == "新增") {
        this.$http({
          url: "/cmsadmin/appIndex/backManager/addPosition",
          method: "POST",
          headers: {
            "platform-type": 0
          },
          data: {
            authType: this.form.authType,
            bgColor: this.form.bgColor,
            materialSubName: this.form.materialSubName,
            endTime: this.form.endTime
              ? moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss")
              : "",
            startTime: this.form.startTime
              ? moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss")
              : "",
            materialIcon:
              this.form.materialIcon ||
              "https://golte-platform.oss-cn-shanghai.aliyuncs.com/mgr/material/image/index/a7040abb9189420abadf9bec7c75f224251EBA2757A8CF4B870412553AD8EB85",
            materialId: this.form.materialId,
            materialName: this.form.materialName,
            positionId: this.positionId,
            positionType: this.positionType,
            refCode: (this.form.refCode && this.form.refCode.toString()) || "",
            refType: null,
            materialType: "1",
            visitModel: "all",
            sort: this.form.sort,
            targetType: this.form.targetType,
            targetUrl: this.form.targetUrl
          }
        })
          .then(res => {
            if (res.success === 0) {
              this.$message.error(res.errorMsg);
            } else {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;

              (this.msg = ""), this.DetailByPage();
            }
          })
          .catch(() => {
            this.$message.error("添加失败");
          });
      } else {
        this.$http({
          url: "/cmsadmin/appIndex/backManager/addPosition",
          method: "POST",
          headers: {
            "platform-type": 0
          },
          data: {
            authType: this.form.authType,
            bgColor: this.form.bgColor,
            materialSubName: this.form.materialSubName,

            endTime: this.form.endTime
              ? moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss")
              : "",
            startTime: this.form.startTime
              ? moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss")
              : "",
            materialIcon: this.form.materialIcon,
            materialId: this.form.materialId,
            materialName: this.form.materialName,
            positionId: this.form.positionId,
            positionType: this.positionType,
            refCode: (this.form.refCode && this.form.refCode.toString()) || "",
            refType: null,
            materialType: "1",
            visitModel: "all",
            sort: this.form.sort,
            targetType: this.form.targetType,
            targetUrl: this.form.targetUrl
          }
        })
          .then(res => {
            if (res.success === 0) {
              this.$message.error(res.errorMsg);
            } else {
              this.$message.success("修改成功");
              this.dialogFormVisible = false;

              (this.msg = ""), this.DetailByPage();
            }
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      }
    },

    //删除
    isDel(materialId) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: `/cmsadmin/appIndex/backManager/deletePositionMaterialById`,
            method: "POST",
            data: { materialId }
          }).then(res => {
            if (res.success != 1) {
              this.$message.error(res.error);
            } else {
              this.$message.success("删除成功");

              this.DetailByPage();
            }
          });
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
      this.DetailByPage();
    },

    //分页获取优惠券模板列表接口调用
    DetailByPage() {
      this.$http({
        url: `/cmsadmin/appIndex/backManager/fetchIndexPositionMessage`,
        method: "GET",
        headers: {
          "platform-type": 0
        },
        params: {
          positionId: this.positionId,

          page: this.pageIndex,
          size: this.pageSize
        }
      }).then(res => {
        this.tableData = res.list;
        this.listLength = res.list.length;

        this.total = parseInt(res.total);
      });
    },
    //城市列表接口调用
    fetchRegionCommunityList() {
      this.$http({
        url: `/cmsadmin/appIndex/backManager/fetchRegionCommunityList`,
        method: "GET"
      }).then(res => {
        this.regionCommunityList = res;
      });
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;

      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;

      this.DetailByPage();
    }
  }
};
</script>
<style scoped lang="scss">
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.news {
  margin-left: 60%;
}
.entirety {
  width: 95%;
  margin: 10px;
  border: 7px solid #fafafa;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-bottom: 1%;

    margin-left: 1%;
  }
}

.overall {
  width: 100%;
  height: auto;
  display: flex;

  justify-content: space-between;
  margin-top: 3%;
  .left {
    width: 20%;
    height: auto;
  }
  .right {
    width: 80%;
    height: auto;
  }
}
.demo-input-suffix {
  margin-left: 2%;
}
.select {
  width: 65%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
/deep/ .itemClass .el-form-item__content {
  width: 350px;
}
.userSearch {
  display: flex;
  /deep/ .el-input__inner {
    box-sizing: border-box;
    height: 40px;
    border-radius: 0;
    width: 132px;
    border: 1px solid #dcdfe6;
  }
  /deep/ .el-icon-arrow-up:before {
    position: relative;
    top: -4px;
  }
  /deep/ .el-button {
    height: 40px;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    .el-icon-search {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-right: none;
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.selects {
  width: 55%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

/deep/ .but {
  background: #fd7097;
  color: #fff;
  margin-bottom: 1%;
}
</style>
